@if (collapsible) {
    <ion-accordion class="core-course-module-list-wrapper" [id]="section.id"
        [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null" [value]="section.id" toggleIconSlot="start">
        <ng-container *ngTemplateOutlet="sectionHeader" />

        <div slot="content">
            @if (section.expanded) {
                <ng-container *ngTemplateOutlet="sectionContent" />
            }
        </div>
    </ion-accordion>
} @else {
    <div class="core-course-module-list-wrapper" [id]="section.id"
        [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null">
        <ng-container *ngTemplateOutlet="sectionHeader" />
        <ng-container *ngTemplateOutlet="sectionContent" />
    </div>
}

<ng-template #sectionHeader>
    <ion-item class="course-section divider" [class.item-dimmed]="section.visible === 0 || section.uservisible === false" slot="header">
        <ion-label class="ion-text-wrap">
            @if (section.name) {
                <h2 class="big" [id]="'core-section-name-' + section.id">
                    <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id" />
                    @if (section.availabilityinfo) {
                        <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
                    }
                </h2>
            }
            @if (section.visible === 0 && section.uservisible !== false) {
                <div>
                    <ion-badge color="secondary" class="ion-text-wrap">
                        <ion-icon name="far-eye-slash" aria-hidden="true" />
                        {{ 'core.course.hiddenfromstudents' | translate }}
                    </ion-badge>
                </div>
            }
            @if (section.visible === 0 && section.uservisible === false) {
                <div>
                    <ion-badge color="warning">
                        {{ 'core.notavailable' | translate }}
                    </ion-badge>
                </div>
            }
        </ion-label>
        @if (section.highlighted && highlightedName) {
            <ion-badge slot="end">{{highlightedName}}</ion-badge>
        }
    </ion-item>
</ng-template>

<ng-template #sectionContent>
    @if (section.availabilityinfo) {
        <ion-item class="ion-text-wrap section-summary">
            <ion-label>
                <ion-chip>
                    <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
                    <ion-label>
                        <core-format-text [text]="section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id" />
                    </ion-label>
                </ion-chip>
            </ion-label>
        </ion-item>
    }
    @if (section.summary) {
        <ion-item class="ion-text-wrap section-summary">
            <ion-label>
                <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id" />
            </ion-label>
        </ion-item>
    }

    <ng-container *ngFor="let modOrSubsection of section.contents">
        @if (!isModule(modOrSubsection)) {
            <core-course-section [course]="course" [section]="modOrSubsection" [lastModuleViewed]="lastModuleViewed"
                [viewedModules]="viewedModules" [collapsible]="true" />
        } @else if (modOrSubsection.visibleoncoursepage !== 0) {
            <core-course-module [module]="modOrSubsection" [section]="section" [showActivityDates]="course.showactivitydates"
                [showCompletionConditions]="course.showcompletionconditions"
                [isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === modOrSubsection.id" [class.core-course-module-not-viewed]="
                    !viewedModules[modOrSubsection.id] &&
                    (!modOrSubsection.completiondata || modOrSubsection.completiondata.state === completionStatusIncomplete)" />
        }
    </ng-container>
</ng-template>
